<template>
	<view class="fu-p-30">
		<demo-desc>
			此组件展示操作或任务的当前进度，比如上传文件，是一个线形的进度条。
		</demo-desc>
		
		<fu-section title="基本案例" customClass="fu-m-t-20" type="line">
			<fu-progress :percent="percentage1"></fu-progress>
			
			<view class="fu-flex fu-flex-row-around fu-m-t-30">
				<fu-progress :percent="percentage1" mode="circle"></fu-progress>
				<fu-progress :percent="percentage2" mode="circle"></fu-progress>
			</view>
		</fu-section>
		
		<fu-section title="不显示百分比" customClass="fu-m-t-20" type="line">
			<fu-progress :percent="30" :showPercent="false"></fu-progress>
			
			<view class="fu-flex fu-flex-row-around fu-m-t-30">
				<fu-progress :percent="percentage1" mode="circle" :showPercent="false"></fu-progress>
				<fu-progress :percent="percentage2" mode="circle" :showPercent="false"></fu-progress>
			</view>
		</fu-section>
		
		<fu-section title="自定义高度" customClass="fu-m-t-20" type="line">
			<fu-progress :percent="percentage1" :height="10"></fu-progress>
		</fu-section>
		
		<fu-section title="自定义颜色" customClass="fu-m-t-20" type="line">
			<fu-progress :percent="percentage2" activeColor="#01BEFF" :height="10"></fu-progress>
		</fu-section>
		
		<fu-section title="自定义样式(不支持安卓环境的nvue)" customClass="fu-m-t-20" type="line">
			<fu-progress :percent="percentage1" :height="10">
				<text class="fu-percentage-slot">{{percentage1}}%</text>
			</fu-progress>
		</fu-section>
		
		<fu-section title="圆形(插槽)" customClass="fu-m-t-20" type="line">
			<view class="fu-flex fu-flex-row-around">
				<fu-progress :percent="percentage1" :height="10" mode="circle">
					<text class="">加载中</text>
				</fu-progress>
				
				<fu-progress :percent="percentage1" :height="10" mode="circle">
					<text class="fu-color-70B309">加载中</text>
				</fu-progress>
			</view>
		</fu-section>
	</view>
</template>

<script setup>
	import { ref } from 'vue';

	// data数据
	const percentage1 = ref(50);
	const percentage2 = ref(80);
</script>

<style lang="scss" scoped>
	.fu-percentage-slot {
		padding: 1px 5px;
		background-color: #01BEFF;
		color: #fff;
		border-radius: 100px;
		font-size: 10px;
		margin-right: -5px;
	}
</style>